<template>
  
  <div class="card-wrapper">
    <div v-for="(item, i) in items" class="card" :key="i" @click="goPage(item)">
      <img class="icon" :src="item.icon" alt="">
      <div class="info">
        <span class="title">{{ item.title }}</span>
        <span class="title" style="margin-left: 6px;">{{ item.desc }}</span>
      </div>
      <div v-if="item.type == 'bsy'" class="date">查看数据</div>
      <div v-else-if="item.updateTime" class="date">{{ item.updateTime }}</div>
      <div v-else class="date">暂无数据</div>
      
    </div>
  </div>

</template>

<script>

import dayjs from '@/common/utils/day/day.js'

const  uricKetoneLevels = ['阴性-', '弱阳性±', '阳性+', '阳性++', '阳性+++', '阳性++++'];

export default {
  components: {},
  props: {
    blockData: {
      type: Object,
    },
    uricketoneData: {
      type: Object,
    },
    uricAcidData: {
      type: Object,
    }
  },
  emits: ['goPage'],
  data() {
    return {
      items: [
        { type: 'sleep', title: '睡眠', icon: 'https://pics.leshiguang.com/vpage/2024/01/16/f9cff43fc37e4bf98b4df4b8db93cb42.png', path: '/sleep/homepro.html', value: undefined, desc: undefined},
        { type: 'weight', title: '体重', icon: 'https://pics.leshiguang.com/vpage/2024/01/16/a9e9f0029bc34709bf0e53da0f05ecbe.png', path: '/weight/v3/home.html'},
        { type: 'bsy', itemCode: 'BLOOD_PRESSURE', title: '血压', icon: 'https://pics.leshiguang.com/vpage/2024/01/16/37eb5e8d4fbe4f8ca513dc780f99d637.png', path: '/pagesHome/measurement-details/measurement-details'},
        { type: 'bloodsugar', title: '血糖', icon: 'https://pics.leshiguang.com/vpage/2024/01/16/a50e7634d3b14c55bb01104990dc192c.png', path: '/bloodsugar/home.html'},
        { type: 'step', title: '步数', icon: 'https://pics.leshiguang.com/vpage/2024/01/16/4195e90546444494881e10e8892dc886.png', path: '/sport/weightHome.html'},
        { type: 'heartrate', title: '心率', icon: 'https://pics.leshiguang.com/vpage/2024/01/16/3e3feddc3c3241188a1167c693cbe140.png', path: '/heartRate/home.html'},

        { type: 'bsy', itemCode: 'URIC_ACID', title: '尿酸', icon: 'https://pics.leshiguang.com/vpage/2024/01/16/d81f7fb6bb8a4c85a06859f651b45b36.png', path: '/pagesHome/measurement-details/measurement-details'},
        { type: 'bsy', itemCode: 'GLYCOSYLATED_HEMOGLOBIN', title: '糖化血红蛋白', icon: 'https://pics.leshiguang.com/vpage/2024/01/16/d81f7fb6bb8a4c85a06859f651b45b36.png', path: '/pagesHome/measurement-details/measurement-details'},
        { type: 'bsy', itemCode: 'FOUR_ITEMS_BLOOD_LIPID', title: '血脂四项', icon: 'https://pics.leshiguang.com/vpage/2024/01/16/d81f7fb6bb8a4c85a06859f651b45b36.png', path: '/pagesHome/measurement-details/measurement-details'},
        { type: 'bsy', itemCode: 'HOMOCYSTEINE', title: '同型半胱氨酸', icon: 'https://pics.leshiguang.com/vpage/2024/01/16/d81f7fb6bb8a4c85a06859f651b45b36.png', path: '/pagesHome/measurement-details/measurement-details'},
        { type: 'bsy', itemCode: 'BLOOD_OXYGEN', title: '血氧', icon: 'https://pics.leshiguang.com/vpage/2024/05/07/018df232d7dc4a52ab912b3244264e90.png', path: '/pagesHome/measurement-details/measurement-details'}
      ],
    };
  },
  created() {
  },
  watch: {
    
    blockData(val) {
      if (val && val.dataBlocks) {
        console.warn('blockData', val);
        this.items.filter(e => e.type !== 'uricketone' && e.type !== 'uricAcid').forEach(e => {
          e.value = undefined;
          e.desc = undefined;
          e.updateTime = undefined;
        })
        val.dataBlocks.forEach(e => {
          const item = this.items.find(i => i.type === e.type);
          console.warn('item', item);
          if (item) {
            // 更新时间
            if (e.updateTime) {
              item.updateTime = this.getTime(e.updateTime);
            }
            if (item.type === 'step' && e.dataDetail) {
              item.desc = `${e.dataDetail[1].value}分钟`;
            }
            else if (item.type === 'sleep' && e.dataDetail) {
              item.desc = `${e.dataDetail[0].value}小时${e.dataDetail[1].value}分钟`
            }
            else if (item.type === 'heartrate' && e.dataDetail) {
              item.desc = `${e.dataDetail[0].value }次/分钟`
            }
            else if (item.type === 'bloodsugar' && e.dataDetail ) {
              item.desc = `${e.dataDetail[0].value}mmol/L`
            }
            else if (item.type === 'bloodpressure' && e.dataDetail) {
              item.desc = `${e.dataDetail[0].value}mmHg`
            }
            else if (item.type === 'weight' && e.dataDetail) {
              item.desc =`${e.dataDetail[0].value}${e.dataDetail[0].unit}`
            }
          }
        })
        this.$forceUpdate();
      }
    },
    uricketoneData(val) {
      console.warn('uricketoneData', val)
      const item = this.items.find(i => i.type === 'uricketone');
      if (val) {
        
        item.updateTime = this.getTime(val.measurementDate);
        item.desc = uricKetoneLevels[val.uricKetoneLevel];
        
      } else {
        item.updateTime = undefined;
        item.desc = undefined;
      }
      this.$forceUpdate();
    },
    uricAcidData(val) {
      console.warn('uricAcidData', val)
      const item = this.items.find(i => i.type === 'uricAcid');
      if (val) {
        item.updateTime = this.getTime(val.measurementDate);
        item.desc = `${val.uricAcidContent}μmol/L`;
      } else {
        item.updateTime = undefined;
        item.desc = undefined;
      }
      this.$forceUpdate();
    }
  },
  methods: {
    getTime(timestamp) {
      if (dayjs(timestamp).format('YYYY-MM-DD') === dayjs().format('YYYY-MM-DD')) {
        return '今天'
      } else {
        return dayjs(timestamp).format('MM/DD');
      }
    },

    goPage(item) {
      this.$emit('goPage', item);
    },
  },
};
</script>
<style lang="scss">
  
.card-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  padding: 24rpx;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20rpx;
  .card {
    flex: 1;
    padding: 16px 20px;
    background: #FFFFFF;
    box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    position: relative;
    .icon {
      width: 32px;
      height: 32px;
      margin-bottom: 8px;
    }
    .date {
      font-size: 12px;
      color: rgba(34, 34, 34, 0.5)
    }
    .info {
      margin-bottom: 2px;
      .title {
        font-weight: bold;
        font-size: 16px;
        color: rgba(34, 34, 34, 1);
      }
    }
  }
}
</style>
